<template>
    <div class="login-container">
        <div class="login-box">
            <div style="width: 400px; padding: 40px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); background-color: #fff;">
            <div style="text-align: center; margin-bottom: 30px;">
                <h2 style="margin: 0; color: #1890ff;">登录</h2>
            </div>
            <el-form :model="data.form" :rules="data.rules" ref="formRef" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="data.form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="data.form.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="role">
                    <el-select v-model="data.form.role" style="width: 100%" size="large">
                        <el-option label="管理员" value="ADMIN"></el-option>
                        <el-option label="员工" value="EMP"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
                </el-form-item>
                <div style="text-align: center;">
                    <el-link type="primary" @click="$router.push('/register')">没有账号？立即注册</el-link>
                </div>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '@/utils/request.js';
import { ElMessage } from 'element-plus';

const data = reactive({
    form: {
        role:'ADMIN'
    },
    rules: {
        username: [
            {
                required: true,
                message: '请输入账号',
                trigger: 'blur'
            }
        ],password: [
            {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }
        ]
    }

})
const formRef = ref();                                                     

const login = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            request.post('/login', data.form).then(res => {
                if (res.code === '200') { // 登录成功
                    //存储后台返回的用户信息
                    localStorage.setItem('xm-pro-user', JSON.stringify(res.data)); //把json对象转成json字符串存储
                    ElMessage.success('登录成功');
                    setTimeout(() => {
                        location.href = '/manager/home'; // 跳转到首页
                    },500)

                } else {
                    ElMessage.error(res.msg);
                    
                }


                
            })
        }


    })


    
}



</script>
<style scoped>
.login-container {
    height: 100vh;
    overflow: hidden;
    background-image: url('@/assets/bg.png');
    background-size: cover;
}
.login-box {
    width: 50%;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
}

</style>